<script>
    var browseWidth = $(window).width();
    var browseHeight = $(window).height();
    loadFlash();
    loadBackground(browseWidth,browseHeight);
    function loadBackground(browseWidth,browseHeight){
        $heightRatio = 1080/browseHeight;
        $widthRatio  = 1920/browseWidth;

        if ($heightRatio < $widthRatio) {
            $optimalRatio = $heightRatio;
        } else {
            $optimalRatio = $widthRatio;
        }

        $optimalHeight = 1080/$optimalRatio;
        $optimalWidth  = 1920/$optimalRatio;

        var FullscreenrOptions = {  width: $optimalWidth, height: $optimalHeight, bgID: '.bgimg' };
        jQuery.fn.fullscreenr(FullscreenrOptions);
    }
    function loadFlash(){
        var flashvars = { };

        var params = {
            id: "bg",
            name: "bg",
            wmode: "transparent",
            menu: "false"
        };
        var attributes = {
            id: "bg",
            name: "bg",
            wmode: "transparent",
            menu: "false"
        };
    }
</script>

<script type="text/javascript">
    $(window).load(function() {
        $('#slider').orbit({
            animation: 'horizontal-push',                  // fade, horizontal-slide, vertical-slide, horizontal-push
            animationSpeed: 800,                // how fast animtions are
            timer: true, 			 // true or false to have the timer
            advanceSpeed: 4000, 		 // if timer is enabled, time between transitions
            pauseOnHover: false, 		 // if you hover pauses the slider
            startClockOnMouseOut: false, 	 // if clock should start on MouseOut
            startClockOnMouseOutAfter: 1000, 	 // how long after MouseOut should the timer start again
            directionalNav: true, 		 // manual advancing directional navs
            captions: true, 			 // do you want captions?
            captionAnimation: 'fade', 		 // fade, slideOpen, none
            captionAnimationSpeed: 800, 	 // if so how quickly should they animate in
            bullets: true,			 // true or false to activate the bullet navigation
            bulletThumbs: false,		 // thumbnails for the bullets
            bulletThumbLocation: '',		 // location from this file where thumbs will be
            afterSlideChange: function(){} 	 // empty function
        });
    });
</script>

<div id="slider">
<!--    --><?// $i=0; foreach ($slide_shows as $slide_show) {
//    if($i==0){?>
<!--        <a style="display: block; left: 0px; z-index: 3;" href="#">-->
<!--        <span class="title-content">-->
<!--            <p class="title">--><?//=$slide_show->image_name?><!--</p>-->
<!--        </span>-->
<!--        <span>-->
<!--            <img class="bgimg" src="--><?//=$slide_show->image_path?><!--" />-->
<!--        </span>-->
<!--        </a>-->
<!--        --><?//}else{?>
<!--        <a style="display: block; left: -1280px; z-index: 1;" href="#">-->
<!--        <span class="title-content">-->
<!--            <p class="title">--><?//=$slide_show->image_name?><!--</p>-->
<!--        </span>-->
<!--        <span>-->
<!--            <img class="bgimg" src="--><?//=$slide_show->image_path?><!--" />-->
<!--        </span>-->
<!--        </a>-->
<!--        --><?//}$i++;}?>

    <a style="display: block; left: 0px; z-index: 3;" href="#">
        <span class="title-content">
            <p class="title"></p>
        </span>
        <span>
            <img class="bgimg" src="<?=drupal_get_path('module', 'cao') . '/uploads/images/BackGround.jpg'?>"/>
        </span>
    </a>

    <a style="display: block; left: 0px; z-index: 3;" href="#">
        <span class="title-content">
            <p class="title"></p>
        </span>
        <span>
            <img class="bgimg" src="<?=drupal_get_path('module', 'cao') . '/uploads/images/BackGround.jpg'?>"/>
        </span>
    </a>
</div>